// 首页的数据渲染
// 商品分类
var goodClass = "";
dataIndex.navs.forEach(function (item) {
  var domStr = `<li>
                    <a href="./list.html?class=${item.class}">
                        <div>
                            <img src="${item.icon}"
                                alt="" />
                        </div>
                        <div>${item.title}</div>
                    </a>
                </li>`;
  goodClass += domStr;
});

$1(".head_list3_menu").innerHTML = goodClass;

// 轮播图

//图片
var bannerList = "";
// 小圆点
var pages = "";
dataIndex.banner.forEach(function (item, index) {
  var domStr = `
        <div class="slide_img">
           <a href="./product.html?id=${item.id}">
           <img src=${item.imgurl} alt="">
            <span>${item.codeTitle}</span>
            <span>${item.title}</span>
            </a>
        </div>
    `;
  bannerList += domStr;
  pages += "<div>" + (index + 1) + "</div>";
});
$1(".slideshow").innerHTML += bannerList;
$1(".slide_dot").innerHTML = pages;

// 设置轮播图样式

// 获取外部容器对象
var slide_img = $2(".slide_img");
// 获取小圆点对象
var dot = $2(".slide_dot div");
// 上一张
var prev = $1(".slide_left");
// 下一张
var next = $1(".slide_right");
//记录当前图片下标
var imgIndex = 0;
// 自动播放定时器
var timer = null;

// 初始化
dot[imgIndex].className = "active"; //选中第一个默认选中
slide_img[imgIndex].className = "slide_img show";

// (對象，屬性集合，可選（回調函數）)

animate(slide_img[imgIndex], { opacity: 1 }, function () {
  autoPlay();
});
function autoPlay() {
  timer = setInterval(function () {
    moveNext();
  }, 2000);
}

//切换图片
function moveNext() {
  //   // 清空原始状态
  dot[imgIndex].className = "";
  slide_img[imgIndex].className = "slide_img";
  slide_img[imgIndex].style.opacity = 0.1;
  // 设置新状态
  imgIndex++;
  if (imgIndex >= slide_img.length) {
    imgIndex = 0;
  }
  dot[imgIndex].className = "active";
  slide_img[imgIndex].className += " show";
  animate(slide_img[imgIndex], { opacity: 1 });
}

function movePrev() {
  dot[imgIndex].className = "";
  slide_img[imgIndex].className = "slide_img";
  slide_img[imgIndex].style.opacity = 0.1;
  imgIndex--;
  if (imgIndex < 0) {
    imgIndex = slide_img.length - 1;
  }
  dot[imgIndex].className = "active";
  slide_img[imgIndex].className = "slide_img show";
  animate(slide_img[imgIndex], { opacity: 1 });
}

// 点击切换下一张
next.onclick = function () {
  clearInterval(timer); // 停止自动播放
  clearInterval(slide_img[imgIndex].timer); // 清除当前运动元素的计时器
  moveNext(); // 切换下一张
  autoPlay(); // 启动自动播放
};

// 点击切换上一张
prev.onclick = function () {
  clearInterval(timer); // 停止自动播放
  clearInterval(slide_img[imgIndex].timer); // 清除当前运动元素的计时器
  movePrev(); // 切换上一张
  autoPlay(); // 启动自动播放
};

// 窗口失去焦点事件
window.onblur = function (){
    clearInterval(timer) // 停止自动播放
}
// 窗口获得焦点事件
window.onfocus = function (){
    autoPlay() // 启动自动播放
}



// 渲染三个新品
var newGoods = "";
dataIndex.Mavic.new.forEach(function (item) {
  var donStr = `
          <li style="background-image:url(${item.imgbg1})">
          <a href="./product.html?id=${item.id}">
                <img src="${item.imgbg2}" alt="">
                <img src="${item.imghover}" alt="">
                    <div>
                        <h2>${item.title}</h2>
                        <h4>${item.cnt}</h4>
                        <p>${item.description}</p>
                        <span>￥<i>${item.price}</i></span>
                    </div>
                </a>
            </li>
    `;
  newGoods += donStr;
});
$1(".products_list").innerHTML = newGoods;

// 渲染main数据
$1(".Mavic_list1_left a").href = "./product.html?id=" + dataIndex.Mavic.main.id;
$1(".Mavic_list1_left img").src = dataIndex.Mavic.main.imgurl;
$1(".Mavic_list1_left h2").innerHTML = dataIndex.Mavic.main.title;
$1(".Mavic_list1_left p").innerHTML = dataIndex.Mavic.main.description;
$1(".Mavic_list1_left i").innerHTML = dataIndex.Mavic.main.price;
$1(".Mavic_list1_right video").poster = dataIndex.Mavic.main.poster;
$1(".Mavic_list1_right video").src = dataIndex.Mavic.main.video;

// 渲染商品列表
var goodsList = "";
dataIndex.Mavic.list.forEach(function (item, index) {
  var domStr = `
         <li>
            <a href="./product.html?id=${item.id}">
                    <div style="background-image: url(${item.imgbg});">
                        <img src="${item.imghover}"
                            alt="">
                        <!--  -->
                        <div>${item.description}</div>
                    </div>
                    <h2>${item.title}</h2>
                    <span>￥<i>${item.price}</i></span>
                </a></li>
        `;
  goodsList += domStr;
});
$1(".Mavic_main").innerHTML = goodsList;